<template>
  <div>
    <Header />
    <div class="detail">
      <div class="info-banner">
        <van-swipe indicator-color="#ebedf0">
        <van-swipe-item v-for="(item,index) in detaildata.listImgs" :key="index">
          <img :src="item.listImgpath" alt="">
        </van-swipe-item>
      </van-swipe>
      </div>
      <div class="info-attrs">
        <div class="info-xilie">{{detaildata.proSeries}}</div>
        <div class="info-name">{{detaildata.displayName}}</div>
        <div class="info-price">￥{{detaildata.proPrice}}</div>
        <div class="info-color-list">
          <div class="item-color cur">
            <img :src="minImg.listImgpath" alt="">
          </div>
        </div>
      </div>
      <div class="info-pad info-groups"></div>
      <div class="info-share">
        <div>分享至</div>
        <img src="../assets/img/wechat.png" alt="" />
        <img src="../assets/img/applet.png" alt="" />
      </div>

    <div class="info-detail" @click="handleparameter">
      <p>产品参数</p>
      <span v-if="isparameter">
        <van-icon name="plus" />
      </span>
      <span v-if="!isparameter">
        <van-icon name="minus" />
      </span>
    </div>
    <ul class="info-action" v-if="!isparameter">
      <li>
        <span>产品编码</span>
        <div>{{detaildata.proCode}}</div>
      </li>
      <li>
        <span>产品类型</span>
        <div>{{detaildata.proSort}}</div>
      </li>
      <li>
        <span>适用场景</span>
        <div v-html="detaildata.applicableScene">{{detaildata.applicableScene}}</div>
      </li>
      <li>
        <span>适用对象</span>
        <div v-html="detaildata.applicableTarget">{{detaildata.applicableTarget}}</div>
      </li>
      <li>
        <span>颜色分类</span>
        <div>{{detaildata.proColor}}</div>
      </li>
      <li>
        <span>产品形状</span>
        <div>钟罩</div>
      </li>
    </ul>

    <div class="info-detail" @click="handledetail">
      <p>产品详情</p>
      <span v-if="isdetail">
        <van-icon name="plus" />
      </span>
      <span v-if="!isdetail">
        <van-icon name="minus" />
      </span>
    </div>

    <div class="info-img" v-if="!isdetail">
      <img v-for="(item,index) in detaildata.detailImgs" :key="index" :src="item.detailImgpath" alt="">
    </div>

    <div class="info-detail" @click="handlepack">
      <p>包装与配送</p>
      <span v-if="ispack">
        <van-icon name="plus" />
      </span>
      <span v-if="!ispack">
        <van-icon name="minus" />
      </span>
    </div>
    <div class="info-action" v-if="!ispack" v-html="detaildata.packageDelivery">
      {{detaildata.packageDelivery}}
    </div>

    <div class="info-detail" @click="handleprotect">
      <p>商品护养</p>
      <span v-if="isprotect">
        <van-icon name="plus" />
      </span>
      <span v-if="!isprotect">
        <van-icon name="minus" />
      </span>
    </div>
    <div class="info-action" v-if="!isprotect" v-html="detaildata.goodsUpkeep">
      {{detaildata.goodsUpkeep}}
    </div>

    <div class="buy-box">
      <div class="icon-kefu">
        <van-icon name="service-o" size="0.48rem" />
      </div>
      <a  @click="addcartdata(detaildata)" class="btn-addcart">加入购物车</a>
      <div class="btn-buynow">立即购买</div>
    </div>
  </div>
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import {detailData} from '../api/goods'
export default {
  components: {
    Header,
  },
  data() {
    return {
      detaildata:[],
      minImg:[],
      isprotect: true,
      isdetail:  true,
      isparameter:  true,
      ispack:  true,
    }
  },
  created () {
    let {id}=this.$route.params
    // console.log(id)
    detailData(id).then((res)=>{
      // console.log(JSON.parse(JSON.stringify(res.data.data)))
      this.detaildata=res.data.data.proProductJson
      // console.log(this.detaildata)
      this.minImg=res.data.data.proProductJson.listImgs[0]
    })
  },
  methods: {
    handleparameter() {
      this.isparameter = !this.isparameter;
    },
    handleprotect() {
      this.isprotect = !this.isprotect;
    },
    handledetail() {
      this.isdetail = !this.isdetail;
    },
    handlepack() {
      this.ispack = !this.ispack;
    },
    addcartdata(obj){
      this.$store.commit("cartlist/addcartlistmut",obj)
      this.$router.push("/cart")
    }
  },
};
</script>

<style src="../assets/css/detail.css" scoped>
</style>